<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <link rel="stylesheet" href="assets/css/font-awesome.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        /* 顶部导航 */
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: #667eea;
            text-decoration: none;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-menu a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-menu a:hover {
            color: #667eea;
        }

        .auth-buttons {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        /* 用户下拉菜单样式 */
        .user-dropdown {
            position: relative;
            display: inline-block;
        }

        .user-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            min-width: 160px;
            z-index: 1000;
            display: none;
            margin-top: 0.5rem;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            color: #333;
            text-decoration: none;
            font-size: 0.9rem;
            transition: background-color 0.3s ease;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
        }

        .dropdown-item:hover {
            background: #f8f9fa;
            color: #333;
        }

        .dropdown-item:first-child {
            border-radius: 8px 8px 0 0;
        }

        .dropdown-item:last-child {
            border-radius: 0 0 8px 8px;
        }

        /* 页面内容区域样式 */
        .content-section {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .section-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem 2rem;
            text-align: center;
        }

        .section-header h2 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
        }

        /* 分类网格样式 */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            padding: 2rem;
        }

        .category-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            border-left: 4px solid #667eea;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .category-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .category-description {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .category-count {
            background: #667eea;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        /* 标签网格样式 */
        .tag-grid {
            padding: 2rem;
        }

        .tag-cloud-large {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        .tag-large {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            border-radius: 25px;
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .tag-large:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            color: white;
        }

        .tag-count {
            background: rgba(255,255,255,0.2);
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            font-size: 0.8rem;
        }

        /* 分页控件样式 */
        .pagination-controls {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 2rem;
        }

        .pagination-controls button {
            padding: 0.5rem 1rem;
            border: 1px solid #e9ecef;
            background: white;
            color: #333;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pagination-controls button:hover {
            border-color: #667eea;
            color: #667eea;
        }

        .pagination-controls button.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .pagination-controls button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }

        .btn-outline {
            background: transparent;
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-outline:hover {
            background: #667eea;
            color: white;
        }

        /* 主要内容区域 */
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 2rem;
        }

        /* 左侧主内容 */
        .main-content {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* 置顶文章 */
        .featured-section {
            margin-bottom: 3rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .featured-articles {
            display: grid;
            gap: 1rem;
        }

        /* 文章卡片 */
        .article-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            border-left: 4px solid #667eea;
            transition: all 0.3s;
            cursor: pointer;
        }

        .article-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .article-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 0.5rem;
            text-decoration: none;
        }

        .article-title:hover {
            color: #667eea;
        }

        .article-summary {
            color: #666;
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: #888;
        }

        .article-tags {
            display: flex;
            gap: 0.5rem;
        }

        .tag {
            background: #667eea;
            color: white;
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            font-size: 0.8rem;
            text-decoration: none;
        }

        .tag:hover {
            background: #5a6fd8;
        }

        /* 文章列表 */
        .articles-section {
            margin-bottom: 2rem;
        }

        .article-list {
            display: grid;
            gap: 1.5rem;
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .page-btn {
            padding: 0.5rem 0.8rem;
            border: 1px solid #ddd;
            background: white;
            color: #666;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .page-btn:hover, .page-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        /* 右侧边栏 */
        .sidebar {
            display: grid;
            gap: 2rem;
            height: fit-content;
        }

        .widget {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .widget-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* 分类列表 */
        .category-list, .tag-cloud {
            display: grid;
            gap: 0.5rem;
        }

        .category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            background: #f8f9fa;
            border-radius: 6px;
            text-decoration: none;
            color: #333;
            transition: all 0.3s;
        }

        .category-item:hover {
            background: #667eea;
            color: white;
        }

        .category-count {
            background: #ddd;
            color: #666;
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            font-size: 0.8rem;
        }

        .category-item:hover .category-count {
            background: rgba(255,255,255,0.2);
            color: white;
        }

        /* 标签云 */
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag-cloud .tag {
            transition: all 0.3s;
        }

        /* 搜索框 */
        .search-widget {
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid #eee;
            border-radius: 6px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
        }

        .search-input:focus {
            border-color: #667eea;
        }

        .search-btn {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #667eea;
            cursor: pointer;
            font-size: 1.2rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }
            
            .container {
                grid-template-columns: 1fr;
                padding: 0 1rem;
            }
            
            .nav-container {
                padding: 0 1rem;
            }
        }

        /* 加载动画 */
        .loading {
            text-align: center;
            padding: 2rem;
            color: #666;
        }

        .loading i {
            font-size: 2rem;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 3rem;
            color: #888;
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: #ddd;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">
                <i class="fas fa-blog"></i>
                我的博客
            </a>
            
            <ul class="nav-menu">
                <li><a href="#" onclick="loadHome()">首页</a></li>
                <li><a href="#" onclick="showAllArticles()">文章</a></li>
                <li><a href="#" onclick="showCategories()">分类</a></li>
                <li><a href="#" onclick="showTags()">标签</a></li>
                <li><a href="#" onclick="showAbout()">关于</a></li>
            </ul>
            
            <div class="auth-buttons">
                <a href="login.html" class="btn btn-outline">
                    <i class="fas fa-sign-in-alt"></i>
                    登录
                </a>
                <a href="my-articles.html" class="btn btn-outline" id="myArticlesBtn" style="display: none;">
                    <i class="fas fa-file-alt"></i>
                    我的文章
                </a>
                <a href="editor.html" class="btn btn-outline" id="writeArticleBtn" style="display: none;">
                    <i class="fas fa-edit"></i>
                    写文章
                </a>
                <a href="admin.html" class="btn btn-primary" id="adminBtn" style="display: none;">
                    <i class="fas fa-cog"></i>
                    管理
                </a>
                
                <!-- 用户下拉菜单 -->
                <div class="user-dropdown" id="userDropdown" style="display: none;">
                    <button class="btn btn-outline user-btn" onclick="toggleUserMenu()">
                        <i class="fas fa-user"></i>
                        <span id="username"></span>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="dropdown-menu" id="userMenu">
                        <a href="profile.html" class="dropdown-item">
                            <i class="fas fa-user-circle"></i>
                            个人资料
                        </a>
                        <button class="dropdown-item" onclick="logout(); return false;">
                            <i class="fas fa-sign-out-alt"></i>
                            退出登录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container">
        <!-- 左侧主内容 -->
        <main class="main-content">
            <!-- 首页内容 -->
            <div id="home">
                <!-- 置顶文章区域 -->
                <section class="featured-section" id="featuredSection">
                    <h2 class="section-title">
                        <i class="fas fa-star"></i>
                        置顶文章
                    </h2>
                    <div class="featured-articles" id="featuredArticles">
                        <!-- 置顶文章将动态加载 -->
                    </div>
                </section>

                <!-- 最新文章区域 -->
                <section class="articles-section">
                    <h2 class="section-title">
                        <i class="fas fa-clock"></i>
                        最新文章
                    </h2>
                    <div class="article-list" id="articleList">
                        <!-- 文章列表将动态加载 -->
                    </div>
                    
                    <!-- 分页 -->
                    <div class="pagination" id="pagination">
                        <!-- 分页按钮将动态生成 -->
                    </div>
                </section>
            </div>

            <!-- 文章列表页面 -->
            <div id="articles" style="display: none;">
                <section class="content-section">
                    <div class="section-header">
                        <h2><i class="fas fa-newspaper"></i> 所有文章</h2>
                    </div>
                    <div class="article-list" id="allArticlesList">
                        <!-- 所有文章列表将动态加载 -->
                    </div>
                    <div class="pagination" id="allArticlesPagination">
                        <!-- 分页按钮将动态生成 -->
                    </div>
                </section>
            </div>

            <!-- 分类页面 -->
            <div id="categories" style="display: none;">
                <section class="content-section">
                    <div class="section-header">
                        <h2><i class="fas fa-folder"></i> 文章分类</h2>
                    </div>
                    <div class="category-grid" id="categoryGrid">
                        <!-- 分类网格将动态加载 -->
                    </div>
                </section>
            </div>

            <!-- 标签页面 -->
            <div id="tags" style="display: none;">
                <section class="content-section">
                    <div class="section-header">
                        <h2><i class="fas fa-tags"></i> 热门标签</h2>
                    </div>
                    <div class="tag-grid" id="tagGrid">
                        <!-- 标签网格将动态加载 -->
                    </div>
                </section>
            </div>
        </main>

        <!-- 右侧边栏 -->
        <aside class="sidebar">
            <!-- 搜索框 -->
            <div class="widget search-widget">
                <h3 class="widget-title">
                    <i class="fas fa-search"></i>
                    搜索文章
                </h3>
                <div style="position: relative;">
                    <input type="text" class="search-input" id="searchInput" placeholder="输入关键词搜索...">
                    <button class="search-btn" onclick="performBasicSearch()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                
                <!-- 高级搜索选项 -->
                <div class="advanced-search-toggle">
                    <button type="button" class="toggle-btn" onclick="toggleAdvancedSearch()">
                        <i class="fas fa-filter"></i>
                        高级搜索
                    </button>
                </div>
                
                <div class="advanced-search-options" id="advancedSearchOptions" style="display: none;">
                    <div class="search-filter">
                        <label>分类筛选：</label>
                        <select id="categoryFilter" class="filter-select">
                            <option value="">全部分类</option>
                        </select>
                    </div>
                    
                    <div class="search-filter">
                        <label>排序方式：</label>
                        <select id="sortByFilter" class="filter-select">
                            <option value="latest">最新发布</option>
                            <option value="popular">最热门</option>
                            <option value="views">阅读量</option>
                        </select>
                    </div>
                    
                    <div class="search-filter">
                        <label>热门标签：</label>
                        <div class="tag-filters" id="tagFilters">
                            <!-- 标签过滤器将在这里动态生成 -->
                        </div>
                    </div>
                    
                    <div class="search-actions">
                        <button class="btn btn-primary btn-sm" onclick="performAdvancedSearch()">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                        <button class="btn btn-secondary btn-sm" onclick="clearFilters()">
                            <i class="fas fa-times"></i> 清除
                        </button>
                    </div>
                </div>
            </div>

            <!-- 分类 -->
            <div class="widget">
                <h3 class="widget-title">
                    <i class="fas fa-folder"></i>
                    文章分类
                </h3>
                <div class="category-list" id="categoryList">
                    <!-- 分类列表将动态加载 -->
                </div>
            </div>

            <!-- 热门标签 -->
            <div class="widget">
                <h3 class="widget-title">
                    <i class="fas fa-tags"></i>
                    热门标签
                </h3>
                <div class="tag-cloud" id="tagCloud">
                    <!-- 标签云将动态加载 -->
                </div>
            </div>

            <!-- 热门文章 -->
            <div class="widget">
                <h3 class="widget-title">
                    <i class="fas fa-fire"></i>
                    热门文章
                </h3>
                <div class="article-list" id="popularArticles">
                    <!-- 热门文章将动态加载 -->
                </div>
            </div>
        </aside>
    </div>

    <script>
        // API基础URL
        const API_BASE_URL = 'http://localhost:8080/api';
        
        // 当前页码
        let currentPage = 1;
        let currentCategoryId = null;
        let currentKeyword = null;

        // 页面加载时初始化
        window.addEventListener('load', function() {
            checkAdminAuth();
            loadHome();
            loadSearchData();
        });

                // 检查用户登录状态和权限
        function checkAdminAuth() {
            const user = localStorage.getItem('user');
            const token = localStorage.getItem('token');
            const roles = JSON.parse(localStorage.getItem('userRoles') || '[]');
            const permissions = JSON.parse(localStorage.getItem('userPermissions') || '[]');
            
            const loginBtn = document.querySelector('a[href="login.html"]');
            const adminBtn = document.getElementById('adminBtn');
            const myArticlesBtn = document.getElementById('myArticlesBtn');
            const writeArticleBtn = document.getElementById('writeArticleBtn');
            const userDropdown = document.getElementById('userDropdown');
            const usernameSpan = document.getElementById('username');

            if (user && token) {
                const userObj = JSON.parse(user);
                console.log('当前登录用户:', userObj);
                console.log('用户角色:', roles);
                console.log('用户权限:', permissions.length);

                // 检查token是否有效（简单检查过期时间）
                if (isTokenExpired(token)) {
                    console.log('Token已过期，清除登录信息');
                    clearAuthData();
                    checkAdminAuth(); // 重新检查
                    return;
                }

                // 隐藏登录按钮，显示用户下拉菜单
                if (loginBtn) {
                    loginBtn.style.display = 'none';
                }
                if (userDropdown && usernameSpan) {
                    userDropdown.style.display = 'inline-block';
                    usernameSpan.textContent = userObj.username;
                }

                // 显示用户功能按钮
                if (myArticlesBtn) {
                    myArticlesBtn.style.display = 'inline-flex';
                }
                if (writeArticleBtn) {
                    writeArticleBtn.style.display = 'inline-flex';
                }

                // 如果有管理员角色，显示管理按钮
                if (roles.includes('ADMIN')) {
                    adminBtn.style.display = 'inline-flex';
                }
            } else {
                console.log('用户未登录');
                // 确保显示登录按钮，隐藏用户下拉菜单
                if (loginBtn) {
                    loginBtn.style.display = 'inline-flex';
                    loginBtn.innerHTML = '<i class="fas fa-sign-in-alt"></i> 登录';
                    loginBtn.href = 'login.html';
                }
                if (userDropdown) {
                    userDropdown.style.display = 'none';
                }
                // 隐藏用户功能按钮
                if (adminBtn) {
                    adminBtn.style.display = 'none';
                }
                if (myArticlesBtn) {
                    myArticlesBtn.style.display = 'none';
                }
                if (writeArticleBtn) {
                    writeArticleBtn.style.display = 'none';
                }
            }
        }

        // 检查token是否过期（简单验证）
        function isTokenExpired(token) {
            try {
                const payload = JSON.parse(atob(token.split('.')[1]));
                const currentTime = Date.now() / 1000;
                return payload.exp < currentTime;
            } catch (e) {
                console.error('解析token失败:', e);
                return true; // 解析失败视为过期
            }
        }

        // 清除认证数据
        function clearAuthData() {
            localStorage.removeItem('user');
            localStorage.removeItem('token');
            localStorage.removeItem('refreshToken');
            localStorage.removeItem('userRoles');
            localStorage.removeItem('userPermissions');
        }

        // 创建带认证头的fetch请求
        function fetchWithAuth(url, options = {}) {
            const token = localStorage.getItem('token');
            
            if (token) {
                options.headers = {
                    ...options.headers,
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                };
            }
            
            return fetch(url, options);
        }

        // 加载首页数据
        async function loadHome() {
            console.log('切换到首页');
            document.title = '我的博客';
            
            // 隐藏所有内容区域，显示首页
            hideAllSections();
            document.getElementById('home').style.display = 'block';
            
            try {
                showLoading();
                
                const response = await fetch(`${API_BASE_URL}/blog/home`);
                const result = await response.json();

                if (result.code === 0) {
                    const data = result.data;
                    
                    // 渲染置顶文章
                    renderFeaturedArticles(data.topArticles || []);
                    
                    // 渲染最新文章
                    renderArticles(data.recentArticles || []);
                    
                    // 渲染分类
                    renderCategories(data.categories || []);
                    
                    // 渲染热门标签
                    renderTags(data.popularTags || []);
                    
                    // 渲染热门文章
                    renderPopularArticles(data.popularArticles || []);
                    
                } else {
                    showError('加载数据失败：' + result.message);
                }
                
            } catch (error) {
                console.error('加载首页数据失败:', error);
                showError('加载数据失败，请刷新重试');
            } finally {
                hideLoading();
            }
        }

        // 渲染置顶文章
        function renderFeaturedArticles(articles) {
            const container = document.getElementById('featuredArticles');
            
            if (articles.length === 0) {
                container.innerHTML = '<div class="empty-state"><i class="fas fa-star"></i><p>暂无置顶文章</p></div>';
                return;
            }
            
            container.innerHTML = articles.map(article => `
                <div class="article-card" onclick="viewArticle(${article.id})">
                    <a href="#" class="article-title" onclick="viewArticle(${article.id}); return false;">
                        ${article.title}
                    </a>
                    <div class="article-summary">${article.summary || '暂无摘要...'}</div>
                    <div class="article-meta">
                        <div>
                            <i class="fas fa-user"></i> ${article.author ? article.author.username : '未知作者'}
                            <i class="fas fa-calendar" style="margin-left: 1rem;"></i> ${formatDate(article.publishTime)}
                            <i class="fas fa-eye" style="margin-left: 1rem;"></i> ${article.viewCount || 0}
                        </div>
                        <div class="article-tags">
                            ${(article.tags || []).map(tag => `
                                <a href="#" class="tag" onclick="filterByTag(${tag.id}); return false;">${tag.name}</a>
                            `).join('')}
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 渲染文章列表
        function renderArticles(articles) {
            const container = document.getElementById('articleList');
            
            if (articles.length === 0) {
                container.innerHTML = '<div class="empty-state"><i class="fas fa-file-alt"></i><p>暂无文章</p></div>';
                return;
            }
            
            container.innerHTML = articles.map(article => `
                <div class="article-card" onclick="viewArticle(${article.id})">
                    <a href="#" class="article-title" onclick="viewArticle(${article.id}); return false;">
                        ${article.title}
                    </a>
                    <div class="article-summary">${article.summary || '暂无摘要...'}</div>
                    <div class="article-meta">
                        <div>
                            <i class="fas fa-user"></i> ${article.author ? article.author.username : '未知作者'}
                            <i class="fas fa-calendar" style="margin-left: 1rem;"></i> ${formatDate(article.publishTime)}
                            <i class="fas fa-eye" style="margin-left: 1rem;"></i> ${article.viewCount || 0}
                        </div>
                        <div class="article-tags">
                            ${(article.tags || []).map(tag => `
                                <a href="#" class="tag" onclick="filterByTag(${tag.id}); return false;">${tag.name}</a>
                            `).join('')}
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 渲染分类列表
        function renderCategories(categories) {
            const container = document.getElementById('categoryList');
            
            if (categories.length === 0) {
                container.innerHTML = '<div class="empty-state" style="padding: 1rem;"><p>暂无分类</p></div>';
                return;
            }
            
            container.innerHTML = categories.map(category => `
                <a href="#" class="category-item" onclick="filterByCategory(${category.id}); return false;">
                    <span>${category.name}</span>
                    <span class="category-count">${category.articleCount || 0}</span>
                </a>
            `).join('');
        }

        // 渲染标签云
        function renderTags(tags) {
            const container = document.getElementById('tagCloud');
            
            if (tags.length === 0) {
                container.innerHTML = '<div class="empty-state" style="padding: 1rem;"><p>暂无标签</p></div>';
                return;
            }
            
            container.innerHTML = tags.map(tag => `
                <a href="#" class="tag" onclick="filterByTag(${tag.id}); return false;">${tag.name}</a>
            `).join('');
        }

        // 渲染热门文章
        function renderPopularArticles(articles) {
            const container = document.getElementById('popularArticles');
            
            if (articles.length === 0) {
                container.innerHTML = '<div class="empty-state" style="padding: 1rem;"><p>暂无热门文章</p></div>';
                return;
            }
            
            container.innerHTML = articles.map(article => `
                <div class="article-card" onclick="viewArticle(${article.id})" style="padding: 1rem; margin-bottom: 0.5rem;">
                    <a href="#" class="article-title" onclick="viewArticle(${article.id}); return false;" style="font-size: 1rem;">
                        ${article.title}
                    </a>
                    <div class="article-meta" style="margin-top: 0.5rem;">
                        <span style="font-size: 0.8rem;">
                            <i class="fas fa-eye"></i> ${article.viewCount || 0}
                        </span>
                    </div>
                </div>
            `).join('');
        }

        // 查看文章详情
        function viewArticle(id) {
            window.location.href = `article.html?id=${id}`;
        }

        // 按分类筛选
        function filterByCategory(categoryId) {
            currentCategoryId = categoryId;
            currentKeyword = null;
            currentPage = 1;
            loadArticleList();
        }

        // 按标签筛选
        function filterByTag(tagId) {
            // 跳转到标签页面或实现标签筛选逻辑
            console.log('筛选标签:', tagId);
        }

        // 基础搜索
        function performBasicSearch() {
            const keyword = document.getElementById('searchInput').value.trim();
            if (keyword) {
                performSearch(keyword, null, null, 'latest');
            }
        }

        // 高级搜索
        function performAdvancedSearch() {
            const keyword = document.getElementById('searchInput').value.trim();
            const categoryId = document.getElementById('categoryFilter').value || null;
            const sortBy = document.getElementById('sortByFilter').value || 'latest';
            
            // 获取选中的标签
            const selectedTags = Array.from(document.querySelectorAll('.tag-filter.active'))
                .map(tag => tag.textContent.trim());
            
            performSearch(keyword, categoryId, selectedTags.join(','), sortBy);
        }

        // 执行搜索
        async function performSearch(keyword, categoryId, tags, sortBy) {
            currentKeyword = keyword;
            currentCategoryId = categoryId;
            currentPage = 1;
            
            try {
                showLoading();
                
                const searchParams = new URLSearchParams({
                    page: currentPage,
                    size: 10
                });
                
                if (keyword) searchParams.append('keyword', keyword);
                if (categoryId) searchParams.append('categoryId', categoryId);
                if (tags) searchParams.append('tags', tags);
                if (sortBy) searchParams.append('sortBy', sortBy);
                
                const response = await fetch(`/api/blog/search?${searchParams}`);
                const result = await response.json();
                
                if (result.code === 0) {
                    renderSearchResults(result.data);
                } else {
                    showError('搜索失败：' + result.message);
                }
            } catch (error) {
                console.error('搜索失败:', error);
                showError('搜索失败，请稍后重试');
            } finally {
                hideLoading();
            }
        }

        // HTML转义函数
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        // 创建文章卡片HTML
        function createArticleCard(article) {
            return `
                <div class="article-card" onclick="viewArticle(${article.id})">
                    <div class="article-header">
                        <h3 class="article-title">${article.title}</h3>
                        <div class="article-meta">
                            <span><i class="fas fa-user"></i> ${article.author?.username || '未知作者'}</span>
                            <span><i class="fas fa-calendar"></i> ${formatDate(article.publishTime)}</span>
                            <span><i class="fas fa-eye"></i> ${article.viewCount || 0}</span>
                            ${article.category ? `<span><i class="fas fa-folder"></i> ${article.category.name}</span>` : ''}
                        </div>
                    </div>
                    <div class="article-summary">${article.summary || '暂无摘要...'}</div>
                    ${article.tags && article.tags.length > 0 ? `
                        <div class="article-tags">
                            ${article.tags.map(tag => `
                                <span class="tag" style="background-color: ${tag.color || '#667eea'}" onclick="event.stopPropagation(); filterByTag('${tag.name}');">
                                    ${tag.name}
                                </span>
                            `).join('')}
                        </div>
                    ` : ''}
                </div>
            `;
        }

        // 渲染搜索结果
        function renderSearchResults(data) {
            const articles = data.articles || [];
            const total = data.total || 0;
            const keyword = data.keyword || '';
            
            let html = '';
            
            // 搜索结果头部
            html += `
                <div class="search-results-header" style="background: #f8f9fa; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; color: #6c757d;">
                    <h2><i class="fas fa-search"></i> 搜索结果</h2>
                    <p>
                        ${keyword ? `关键词：<span style="color: #667eea; font-weight: 600;">"${escapeHtml(keyword)}"</span>` : ''}
                        ${total > 0 ? `，共找到 ${total} 篇文章` : '，没有找到相关文章'}
                    </p>
                </div>
            `;
            
            if (articles.length > 0) {
                articles.forEach(article => {
                    html += createArticleCard(article);
                });
            } else {
                html += `
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3>未找到相关文章</h3>
                        <p>试试其他关键词或检查输入是否正确</p>
                        <button class="btn btn-primary" onclick="clearFilters()">
                            <i class="fas fa-times"></i> 清除搜索条件
                        </button>
                    </div>
                `;
            }
            
            document.getElementById('articleList').innerHTML = html;
            currentSection = 'search';
        }

        // 切换高级搜索
        function toggleAdvancedSearch() {
            const options = document.getElementById('advancedSearchOptions');
            const isVisible = options.style.display !== 'none';
            options.style.display = isVisible ? 'none' : 'block';
        }

        // 清除搜索过滤器
        function clearFilters() {
            document.getElementById('searchInput').value = '';
            if (document.getElementById('categoryFilter')) {
                document.getElementById('categoryFilter').value = '';
            }
            if (document.getElementById('sortByFilter')) {
                document.getElementById('sortByFilter').value = 'latest';
            }
            document.querySelectorAll('.tag-filter.active').forEach(tag => {
                tag.classList.remove('active');
            });
            
            currentKeyword = null;
            currentCategoryId = null;
            currentPage = 1;
            
            showContent('home');
        }
        
        // 原来的搜索文章函数（保持向后兼容）
        function searchArticles() {
            performBasicSearch();
        }

        // 加载文章列表
        async function loadArticleList() {
            try {
                showLoading();
                
                let url = `${API_BASE_URL}/blog/articles?page=${currentPage}&size=10`;
                if (currentCategoryId) {
                    url += `&categoryId=${currentCategoryId}`;
                }
                if (currentKeyword) {
                    url += `&keyword=${encodeURIComponent(currentKeyword)}`;
                }
                
                const response = await fetch(url);
                const result = await response.json();

                if (result.code === 0) {
                    const pageResult = result.data;
                    renderArticles(pageResult.records || []);
                    renderPagination(pageResult);
                } else {
                    showError('加载文章列表失败：' + result.message);
                }
                
            } catch (error) {
                console.error('加载文章列表失败:', error);
                showError('加载文章列表失败');
            }
        }

        // 渲染分页
        function renderPagination(pageResult) {
            const container = document.getElementById('pagination');
            
            if (pageResult.pages <= 1) {
                container.innerHTML = '';
                return;
            }
            
            let paginationHtml = '';
            
            // 上一页
            if (pageResult.page > 1) {
                paginationHtml += `<a href="#" class="page-btn" onclick="goToPage(${pageResult.page - 1}); return false;">上一页</a>`;
            }
            
            // 页码
            for (let i = 1; i <= pageResult.pages; i++) {
                if (i === pageResult.page) {
                    paginationHtml += `<span class="page-btn active">${i}</span>`;
                } else {
                    paginationHtml += `<a href="#" class="page-btn" onclick="goToPage(${i}); return false;">${i}</a>`;
                }
            }
            
            // 下一页
            if (pageResult.page < pageResult.pages) {
                paginationHtml += `<a href="#" class="page-btn" onclick="goToPage(${pageResult.page + 1}); return false;">下一页</a>`;
            }
            
            container.innerHTML = paginationHtml;
        }

        // 跳转到指定页
        function goToPage(page) {
            currentPage = page;
            loadArticleList();
        }

        // 显示所有文章
        function showAllArticles() {
            console.log('切换到文章页面');
            document.title = '所有文章 - 我的博客';
            
            // 隐藏所有内容区域，显示文章列表
            hideAllSections();
            document.getElementById('articles').style.display = 'block';
            
            // 重置筛选条件
            currentCategoryId = null;
            currentKeyword = null;
            currentPage = 1;
            
            // 清空搜索框
            const searchInput = document.getElementById('searchKeyword');
            if (searchInput) {
                searchInput.value = '';
            }
            
            // 重置分类筛选
            const categorySelect = document.getElementById('categoryFilter');
            if (categorySelect) {
                categorySelect.value = '';
            }
            
            loadAllArticlesList();
        }

        // 加载所有文章列表（独立于首页）
        async function loadAllArticlesList() {
            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    size: 10
                });

                if (currentCategoryId) {
                    params.append('categoryId', currentCategoryId);
                }
                if (currentKeyword) {
                    params.append('keyword', currentKeyword);
                }

                const response = await fetch(`${API_BASE_URL}/blog/articles?${params}`);
                const result = await response.json();

                if (result.code === 0) {
                    renderAllArticlesList(result.data.records || []);
                    renderAllArticlesPagination(result.data);
                } else {
                    document.getElementById('allArticlesList').innerHTML = 
                        '<p style="text-align: center; color: #666; padding: 2rem;">加载文章失败</p>';
                }
            } catch (error) {
                console.error('加载文章列表失败:', error);
                document.getElementById('allArticlesList').innerHTML = 
                    '<p style="text-align: center; color: #666; padding: 2rem;">网络错误，请稍后重试</p>';
            }
        }

        // 渲染所有文章列表
        function renderAllArticlesList(articles) {
            const container = document.getElementById('allArticlesList');
            
            if (!articles || articles.length === 0) {
                container.innerHTML = '<p style="text-align: center; color: #666; padding: 2rem;">暂无文章</p>';
                return;
            }
            
            container.innerHTML = articles.map(article => `
                <div class="article-card" onclick="viewArticle(${article.id})">
                    <div class="article-header">
                        <h3 class="article-title">${article.title}</h3>
                        <div class="article-meta">
                            <span><i class="fas fa-user"></i> ${article.author?.username || '佚名'}</span>
                            <span><i class="fas fa-calendar"></i> ${formatDate(article.publishTime)}</span>
                            <span><i class="fas fa-eye"></i> ${article.viewCount || 0}</span>
                        </div>
                    </div>
                    <div class="article-summary">${article.summary || '暂无摘要...'}</div>
                    ${article.tags ? `
                        <div class="article-tags">
                            ${article.tags.map(tag => `
                                <span class="tag" style="background-color: ${tag.color || '#667eea'}">${tag.name}</span>
                            `).join('')}
                        </div>
                    ` : ''}
                </div>
            `).join('');
        }

        // 渲染所有文章分页
        function renderAllArticlesPagination(data) {
            const container = document.getElementById('allArticlesPagination');
            
            if (!data || data.pages <= 1) {
                container.innerHTML = '';
                return;
            }
            
            let paginationHTML = '<div class="pagination-controls">';
            
            // 上一页
            if (data.page > 1) {
                paginationHTML += `<button onclick="goToAllArticlesPage(${data.page - 1})">上一页</button>`;
            }
            
            // 页码
            for (let i = 1; i <= data.pages; i++) {
                if (i === data.page) {
                    paginationHTML += `<button class="active">${i}</button>`;
                } else {
                    paginationHTML += `<button onclick="goToAllArticlesPage(${i})">${i}</button>`;
                }
            }
            
            // 下一页
            if (data.page < data.pages) {
                paginationHTML += `<button onclick="goToAllArticlesPage(${data.page + 1})">下一页</button>`;
            }
            
            paginationHTML += '</div>';
            container.innerHTML = paginationHTML;
        }

        // 跳转到指定页码（文章页面）
        function goToAllArticlesPage(page) {
            currentPage = page;
            loadAllArticlesList();
        }

        // 按分类筛选并跳转到文章页面
        function filterByCategory(categoryId) {
            console.log('按分类筛选:', categoryId);
            currentCategoryId = categoryId;
            currentKeyword = null;
            currentPage = 1;
            
            // 切换到文章页面
            hideAllSections();
            document.getElementById('articles').style.display = 'block';
            document.title = '分类文章 - 我的博客';
            
            loadAllArticlesList();
        }

        // 按标签筛选并跳转到文章页面
        function filterByTag(tagName) {
            console.log('按标签筛选:', tagName);
            currentKeyword = tagName;
            currentCategoryId = null;
            currentPage = 1;
            
            // 切换到文章页面
            hideAllSections();
            document.getElementById('articles').style.display = 'block';
            document.title = `标签："${tagName}" - 我的博客`;
            
            loadAllArticlesList();
        }

        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '未知日期';
            
            const date = new Date(dateString);
            const now = new Date();
            const diff = now - date;
            
            const minutes = Math.floor(diff / (1000 * 60));
            const hours = Math.floor(diff / (1000 * 60 * 60));
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            
            if (minutes < 60) {
                return minutes <= 1 ? '刚刚' : `${minutes}分钟前`;
            } else if (hours < 24) {
                return `${hours}小时前`;
            } else if (days < 7) {
                return `${days}天前`;
            } else {
                return date.toLocaleDateString('zh-CN');
            }
        }

        // 显示加载状态
        function showLoading() {
            document.getElementById('articleList').innerHTML = '<div class="loading"><i class="fas fa-spinner"></i><p>加载中...</p></div>';
        }

        function hideLoading() {
            // Loading状态通过内容替换来隐藏
        }

        // 显示错误信息
        function showError(message) {
            document.getElementById('articleList').innerHTML = `<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>${message}</p></div>`;
        }

        // 搜索框回车事件
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performBasicSearch();
            }
        });

        // 加载搜索相关数据
        async function loadSearchData() {
            try {
                // 加载分类数据用于搜索过滤
                const categoriesResponse = await fetch('/api/blog/categories');
                if (categoriesResponse.ok) {
                    const categoriesResult = await categoriesResponse.json();
                    if (categoriesResult.code === 0) {
                        const categorySelect = document.getElementById('categoryFilter');
                        categoriesResult.data.forEach(category => {
                            const option = document.createElement('option');
                            option.value = category.id;
                            option.textContent = category.name;
                            categorySelect.appendChild(option);
                        });
                    }
                }

                // 加载热门标签用于快速筛选
                const tagsResponse = await fetch('/api/blog/tags/popular?limit=10');
                if (tagsResponse.ok) {
                    const tagsResult = await tagsResponse.json();
                    if (tagsResult.code === 0) {
                        const tagFilters = document.getElementById('tagFilters');
                        tagsResult.data.forEach(tag => {
                            const tagElement = document.createElement('span');
                            tagElement.className = 'tag-filter';
                            tagElement.textContent = tag.name;
                            tagElement.onclick = () => toggleTagFilter(tagElement);
                            tagFilters.appendChild(tagElement);
                        });
                    }
                }
            } catch (error) {
                console.error('加载搜索数据失败:', error);
            }
        }

        // 切换标签过滤器状态
        function toggleTagFilter(element) {
            element.classList.toggle('active');
        }

        // HTML转义函数
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        // 切换用户菜单
        function toggleUserMenu() {
            const userMenu = document.getElementById('userMenu');
            const isVisible = userMenu.style.display === 'block';
            userMenu.style.display = isVisible ? 'none' : 'block';
        }

        // 点击其他地方关闭用户菜单
        document.addEventListener('click', function(event) {
            const userDropdown = document.getElementById('userDropdown');
            const userMenu = document.getElementById('userMenu');
            
            if (userDropdown && !userDropdown.contains(event.target)) {
                userMenu.style.display = 'none';
            }
        });

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                clearAuthData();
                showAlert('已退出登录', 'success');
                
                // 刷新页面状态
                checkAdminAuth();
                showContent('home');
            }
        }

        // 显示提示信息（如果不存在的话）
        function showAlert(message, type) {
            // 简单的提示实现
            const alertDiv = document.createElement('div');
            alertDiv.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 1rem 1.5rem;
                background: ${type === 'success' ? '#d4edda' : '#f8d7da'};
                color: ${type === 'success' ? '#155724' : '#721c24'};
                border: 1px solid ${type === 'success' ? '#c3e6cb' : '#f5c6cb'};
                border-radius: 6px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                z-index: 9999;
                font-size: 0.9rem;
            `;
            alertDiv.textContent = message;
            
            document.body.appendChild(alertDiv);
            
            // 3秒后自动消失
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.parentNode.removeChild(alertDiv);
                }
            }, 3000);
        }

        // 显示分类页面
        function showCategories() {
            console.log('切换到分类页面');
            document.title = '分类 - 我的博客';
            
            // 隐藏所有内容区域
            hideAllSections();
            
            // 显示分类区域
            document.getElementById('categories').style.display = 'block';
            
            // 加载并渲染分类
            loadCategoriesPage();
        }

        // 加载分类页面数据
        async function loadCategoriesPage() {
            try {
                const response = await fetch(`${API_BASE_URL}/blog/categories`);
                const result = await response.json();
                
                if (result.code === 0) {
                    renderCategoriesPage(result.data || []);
                } else {
                    document.getElementById('categoryGrid').innerHTML = 
                        '<p style="text-align: center; color: #666; padding: 2rem;">加载分类失败</p>';
                }
            } catch (error) {
                console.error('加载分类失败:', error);
                document.getElementById('categoryGrid').innerHTML = 
                    '<p style="text-align: center; color: #666; padding: 2rem;">网络错误，请稍后重试</p>';
            }
        }

        // 渲染分类页面
        function renderCategoriesPage(categories) {
            const container = document.getElementById('categoryGrid');
            
            if (!categories || categories.length === 0) {
                container.innerHTML = '<p style="text-align: center; color: #666; padding: 2rem;">暂无分类</p>';
                return;
            }
            
            container.innerHTML = categories.map(category => `
                <div class="category-card" onclick="filterByCategory(${category.id})">
                    <div class="category-name">${category.name}</div>
                    <div class="category-description">${category.description || '暂无描述'}</div>
                    <div class="category-count">${category.articleCount || 0} 篇文章</div>
                </div>
            `).join('');
        }

        // 显示标签页面  
        function showTags() {
            console.log('切换到标签页面');
            document.title = '标签 - 我的博客';
            
            // 隐藏所有内容区域
            hideAllSections();
            
            // 显示标签区域
            document.getElementById('tags').style.display = 'block';
            
            // 加载并渲染标签
            loadTagsPage();
        }

        // 加载标签页面数据
        async function loadTagsPage() {
            try {
                const response = await fetch(`${API_BASE_URL}/blog/tags`);
                const result = await response.json();
                
                if (result.code === 0) {
                    renderTagsPage(result.data || []);
                } else {
                    document.getElementById('tagGrid').innerHTML = 
                        '<p style="text-align: center; color: #666; padding: 2rem;">加载标签失败</p>';
                }
            } catch (error) {
                console.error('加载标签失败:', error);
                document.getElementById('tagGrid').innerHTML = 
                    '<p style="text-align: center; color: #666; padding: 2rem;">网络错误，请稍后重试</p>';
            }
        }

        // 渲染标签页面
        function renderTagsPage(tags) {
            const container = document.getElementById('tagGrid');
            
            if (!tags || tags.length === 0) {
                container.innerHTML = '<p style="text-align: center; color: #666; padding: 2rem;">暂无标签</p>';
                return;
            }
            
            container.innerHTML = `
                <div class="tag-cloud-large">
                    ${tags.map(tag => `
                        <div class="tag-large" style="background-color: ${tag.color || '#667eea'}" 
                             onclick="filterByTag('${tag.name}')">
                            <i class="fas fa-tag"></i>
                            <span>${tag.name}</span>
                            <span class="tag-count">${tag.articleCount || 0}</span>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        // 显示关于页面
        function showAbout() {
            console.log('切换到关于页面');
            document.title = '关于 - 我的博客';
            
            // 隐藏所有内容区域
            hideAllSections();
            
            // 创建或显示关于页面内容
            let aboutSection = document.getElementById('about');
            if (!aboutSection) {
                aboutSection = createAboutSection();
                document.querySelector('.main-content').appendChild(aboutSection);
            }
            aboutSection.style.display = 'block';
        }

        // 创建关于页面内容
        function createAboutSection() {
            const aboutSection = document.createElement('section');
            aboutSection.id = 'about';
            aboutSection.style.display = 'none';
            aboutSection.innerHTML = `
                <div class="content-section">
                    <div class="section-header">
                        <h2><i class="fas fa-info-circle"></i> 关于我的博客</h2>
                    </div>
                    <div style="background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); line-height: 1.8;">
                        <h3 style="color: #667eea; margin-bottom: 1rem;">
                            <i class="fas fa-heart"></i> 欢迎来到我的个人博客
                        </h3>
                        <p style="margin-bottom: 1.5rem; color: #555;">
                            这是一个基于Spring Boot构建的个人博客系统，用于分享技术经验、生活感悟和学习笔记。
                        </p>
                        
                        <h4 style="color: #333; margin: 1.5rem 0 1rem 0;">
                            <i class="fas fa-cogs"></i> 技术栈
                        </h4>
                        <ul style="color: #666; margin-bottom: 1.5rem;">
                            <li><strong>后端：</strong>Spring Boot 3.x + MyBatis + MySQL</li>
                            <li><strong>前端：</strong>HTML5 + CSS3 + JavaScript (ES6)</li>
                            <li><strong>安全：</strong>JWT + RBAC权限控制</li>
                            <li><strong>特性：</strong>Markdown支持、分类标签、用户权限管理</li>
                        </ul>
                        
                        <h4 style="color: #333; margin: 1.5rem 0 1rem 0;">
                            <i class="fas fa-star"></i> 主要功能
                        </h4>
                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                            <div style="background: #f8f9fa; padding: 1rem; border-radius: 8px; border-left: 4px solid #667eea;">
                                <h5 style="margin: 0 0 0.5rem 0; color: #333;">文章管理</h5>
                                <p style="margin: 0; font-size: 0.9rem; color: #666;">支持Markdown编写、分类标签、草稿发布</p>
                            </div>
                            <div style="background: #f8f9fa; padding: 1rem; border-radius: 8px; border-left: 4px solid #28a745;">
                                <h5 style="margin: 0 0 0.5rem 0; color: #333;">用户系统</h5>
                                <p style="margin: 0; font-size: 0.9rem; color: #666;">注册登录、个人资料、权限控制</p>
                            </div>
                            <div style="background: #f8f9fa; padding: 1rem; border-radius: 8px; border-left: 4px solid #fd7e14;">
                                <h5 style="margin: 0 0 0.5rem 0; color: #333;">搜索功能</h5>
                                <p style="margin: 0; font-size: 0.9rem; color: #666;">支持关键词、分类、标签多维度搜索</p>
                            </div>
                            <div style="background: #f8f9fa; padding: 1rem; border-radius: 8px; border-left: 4px solid #6f42c1;">
                                <h5 style="margin: 0 0 0.5rem 0; color: #333;">响应式设计</h5>
                                <p style="margin: 0; font-size: 0.9rem; color: #666;">适配桌面和移动端，现代化UI设计</p>
                            </div>
                        </div>
                        
                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1.5rem; border-radius: 10px; text-align: center;">
                            <h4 style="margin: 0 0 0.5rem 0;">
                                <i class="fas fa-envelope"></i> 联系方式
                            </h4>
                            <p style="margin: 0; opacity: 0.9;">
                                如有问题或建议，欢迎通过 
                                <a href="mailto:admin@example.com" style="color: #fff; text-decoration: underline;">admin@example.com</a> 
                                与我联系
                            </p>
                        </div>
                    </div>
                </div>
            `;
            return aboutSection;
        }

        // 隐藏所有内容区域
        function hideAllSections() {
            const sections = ['home', 'articles', 'categories', 'tags', 'about'];
            sections.forEach(sectionId => {
                const element = document.getElementById(sectionId);
                if (element) {
                    element.style.display = 'none';
                }
            });
        }
    </script>
</body>
</html>
